iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
Modern Web

網站前端後端與API系列 第 5

用NPM套件-ExpressJS建立網站框架-2

  • 分享至 

  • xImage
  •  

建立自己的Express專案

還記得我們建立的Express專案嗎?
不記得的話Terminal輸入安裝

$ npm install express-generator -g //全域安裝
$ epxress MyTestProject //生成專案MyTestProject

如果出現以下畫面,即完成建立專案MyTestProject。

$ express MyTestProject

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : MyTestProject/
   create : MyTestProject/public/
   create : MyTestProject/public/javascripts/
   create : MyTestProject/public/images/
   create : MyTestProject/public/stylesheets/
   create : MyTestProject/public/stylesheets/style.css
   create : MyTestProject/routes/
   create : MyTestProject/routes/index.js
   create : MyTestProject/routes/users.js
   create : MyTestProject/views/
   create : MyTestProject/views/error.jade
   create : MyTestProject/views/index.jade
   create : MyTestProject/views/layout.jade
   create : MyTestProject/app.js
   create : MyTestProject/package.json
   create : MyTestProject/bin/
   create : MyTestProject/bin/www

   change directory:
     $ cd MyTestProject

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=mytestproject:* npm start

可以看到最後六行的指令:

change directory://進入我們創建專案的資料夾
     $ cd MyTestProject

   install dependencies://安裝本專案所需套件
     $ npm install

依序照著下方輸入,將可以DEBUG模式啟動專案伺服器。若不使用DEBUG模式監控,直接輸入$ npm start即可。

   run the app://執行專案伺服器
     $ DEBUG=mytestproject:* npm start
> mytestproject@0.0.0 start /path/MyTestProject
> node ./bin/www

現在,我們可以另開一個瀏覽器視窗,網址列輸入

http://localhost:3000/

可以看到
https://ithelp.ithome.com.tw/upload/images/20190921/20113153b4ktjd1JX5.png

噢!這是你的網站!沒錯!回到Terminal可以看到

GET /stylesheets/style.css 200 4.759 ms - 111
GET /favicon.ico 404 10.961 ms - 1302

這表示網站後端的伺服器,收到了你開啟網頁的指令,回傳了網頁該有的資訊給瀏覽器,所以才會看到上面的頁面。接著,我們來了解一下網站架構。


上一篇
用NPM套件-ExpressJS建立網站框架-1
下一篇
用NPM套件-ExpressJS建立網站框架-3
系列文
網站前端後端與API30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言